<template>
    <!-- html结构 -->
    <div class="person">
        <h1>情况四：监视【reactive】定义【对象类型】数据的某个属性</h1>
        <h1>姓名：{{person.name}}</h1>
        <h1>年龄：{{person.age}}</h1>
        <h1>汽车：{{person.car.c1}}、{{ person.car.c2 }}</h1>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeC1">修改汽车1</button>
        <button @click="changeC2">修改汽车2</button>
        <button @click="changeCar">修改汽车对象</button>
    </div>
</template>
<script setup lang="ts" name="Person">
import { reactive, watch } from 'vue';

let person =reactive({
    name:'张三',
    age:18,
    car:{
        c1:"兰博基尼",
        c2:"法拉利"
    }
})
function changeName() {
    person.name += '~';
}
function changeAge() {
    person.age += 1;
}
function changeC1() {
    person.car.c1 = "保时捷1";
}
function changeC2() {
    person.car.c2 = "保时捷2";
}
function changeCar() {
    person.car = {
        c1:"雅迪",
        c2:"艾玛"
    }
}
// // 监视person.name,用一个 getter函数，返回一个值，即写出函数式
// watch(()=>{
//     return person.name
// }, (oldPerson, newPerson) => {
//     console.log('person.name被修改了', oldPerson, newPerson);
// })

// 监视的数据为对象类型，可以直接写，但是建议写成函数式(最佳实践),
// 直接写只能监视car里面属性的变化，如果整体变化（即地址值变了），则之后的变化不会被监听到
// 而函数式可以监听对象整体变化，内部属性变化监听不到，但是可以加配置项{deep:true}
watch(()=>person.car, (oldPerson, newPerson) => {
    console.log('person.car被修改了', oldPerson, newPerson);
},{deep:true})


</script>

<style scoped>
.person {
    background-color: #6cf;
    box-shadow: 0 0 10px #000;
    border-radius: 10px;
    padding: 10px;
}
</style>